import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import "normalize.css";

const app = createApp(App);
app.use(router);
app.mount("#app");

// 文档：https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8
// 等主应用渲染完成，注册微应用加载和渲染
import { registerMicroApps, start } from "qiankun";

// 注册微应用
registerMicroApps([
  {
    name: "vue2", // 微应用的名称
    entry: "//localhost:8080", // 微应用加载的地址
    container: "#vue2-container", // 微应用要渲染到主应用的哪个DOM元素中
    activeRule: "/vue2", // 当前路由路径以 /vue2 开头时，当前微应用就会被加载
  },
  {
    name: "vue3", // 微应用的名称
    entry: "//localhost:5174", // 微应用加载的地址
    container: "#vue3-container", // 微应用要渲染到主应用的哪个DOM元素中
    activeRule: "/vue3", // 当前路由路径以 /vue3 开头时，当前微应用就会被加载
  },
  {
    name: "react18", // 微应用的名称
    entry: "//localhost:3000", // 微应用加载的地址
    container: "#react-container", // 微应用要渲染到主应用的哪个DOM元素中
    activeRule: "/react18", // 当前路由路径以 /react18 开头时，当前微应用就会被加载
  },
]);

// 改造主应用：
// 1. 微应用需要的路由都需要在主应用进行注册
// 2. 路由路径：微应用的路由都需要加上 activeRule 前缀
// 3. 路由组件：只需要渲染 #vue2-container 容器就好
// start();
